<template>
  <div class="contanier">
    <!-- <div class="contanier-title">用户管理</div> -->
    <search-form>
      <template v-slot:formLeft>
        <el-form :inline="true" :model="userFormLine" class="demo-form-inline">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="专题名称" label-width="80px">
                  <el-input v-model="userFormLine.name" placeholder="请输入专题名称" maxlength="16" clearable></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-form-item label="状态" label-width="80px">
                  <el-select v-model="userFormLine.enabledMark" placeholder="请选择状态" label-width="80px" clearable>
                    <el-option label="未开始" :value="10"></el-option>
                    <el-option label="学习中" :value="20"></el-option>
                    <el-option label="已完成" :value="30"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template v-slot:formRight>
        <div class="formRight-btn">
          <el-button icon="el-icon-refresh" class="overPosBtn" @click="onReset">重 置</el-button>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search" class="set-col-btn">查 询</el-button>
        </div>
      </template>
    </search-form>
    <div>
      <search-table>
        <template v-slot:biaoge>
          <template>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
              @selection-change="handleSelectionChange" class="table-top" :header-cell-style="{
                backgroundColor: '#F6F8FC',
                color: '#606266',
              }">
              <el-table-column type="index" label="序号" width="80" align="center">
              </el-table-column>
              <el-table-column label="培训开始时间" width="200">
                <template slot-scope="scope">{{ scope.row.startDatetime }}</template>
              </el-table-column>
              <el-table-column prop="ztmc" label="专题名称" width="230">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column prop="examScore" label="技能考试分数" width="230">
                <template slot-scope="scope">
                  <template v-if="scope.row.categoryId == '科普'">
                    --
                  </template>
                  <template v-else>
                    <div v-if="scope.row.examScore >= 60">{{ scope.row.examScore }}</div>
                    <div v-else style="color: red">{{ scope.row.examScore }}</div>
                  </template>
                </template>
              </el-table-column>
              <el-table-column prop="theoryScore" label="理论考试分数" width="230">
                <template slot-scope="scope">
                  <template v-if="scope.row.categoryId == '科普'">
                    --
                  </template>
                  <template v-else>
                    <div v-if="scope.row.theoryScore >= 60">{{ scope.row.theoryScore }}</div>
                    <div v-else style="color: red">{{ scope.row.theoryScore }}</div>
                  </template>
                </template>
              </el-table-column>
              <el-table-column prop="zt" label="状态">
                <template slot-scope="scope">
                  <!-- 10:未开始  20 学习中   30完成 -->
                  <div v-if="scope.row.enabledMark == 10">未开始</div>
                  <div v-if="scope.row.enabledMark == 20">学习中</div>
                  <div v-if="scope.row.enabledMark == 30">已完成</div>
                </template>
              </el-table-column> 
              <el-table-column prop="syncProgress" label="结果">
                <template slot-scope="scope">
                  <template v-if="scope.row.categoryId == '科普' || scope.row.enabledMark != 30">
                    --
                  </template>
                  <template v-else>
                    <p :class="[scope.row.syncProgress == '合格' ? 'progress-success' : 'progress-error']">{{ scope.row.syncProgress  }}</p>
                  </template>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <!-- certMark 0-未发放 1已发放-->
                  <el-button type="text" size="small" class="cert-button" icon="el-icon-my-message"
                    :disabled="scope.row.certMark == 1"
                    @click="handleCertObtain(scope.row, scope.$index)"
                    v-if="scope.row.categoryId == '科普' && scope.row.enabledMark == 30">
                    证书获取
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </template>
        <template v-slot:fenye>
          <div class="set-table-pg-right">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </template>
      </search-table>
    </div>
    <cert-obtain-dialog :visible.sync="showCertDialog" :resourceId="resourceId" :resourceName="resourceName"  />
  </div>
</template>
<script>
import SearchForm from "@/components/search-form";
import SearchTable from "@/components/search-table";
import { getMySubjectList } from "@/api/exam";
import CertObtainDialog from "./certObtainDialog.vue";
export default {
  name: "UserManagement",
  components: {
    SearchForm,
    SearchTable,
    CertObtainDialog
  },
  data() {
    return {
      resourceId: null,
      resourceName: null,
      showCertDialog: false,
      userFormLine: {
        name: "",
        enabledMark: "",
      },
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      total: 40,
      dialogTableVisible: false,
      formData: {

      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getMySubjectList({
        ...this.userFormLine,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
      }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.pagination.total;
          // 结果通过两次考试是否及格去判断：合格、不合格
          // 技能考试状态：examEnabledMark （0-未通过；1-已通过）
          // 理论考试状态：theoryEnabledMark（0-未通过；1-已通过）
          // 两个都为合格时，合格，
          this.tableData.forEach(item => {
            item.syncProgress = '';
            if (item.examEnabledMark == 1 && item.theoryEnabledMark == 1) {
              item.syncProgress = '合格';
            }
            else {
              item.syncProgress = '不合格';
            }
          })
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getList();
    },
    editRow(row) {
      console.log(row);
      this.$router.push({
        name: "userManagemntEdit",
        params: { id: row.id },
      });
    },
    onSubmit(){
      this.getList();
    },
    onReset(){
      this.userFormLine = {};
      this.getList();
    },
    handleCertObtain(row) {
      this.resourceId = row.id;
      this.resourceName = row.name;
      this.showCertDialog = true;
    },
  },
};
</script>
<style scoped lang="scss">
.nopass {
  width: 61px;
  height: 28px;
  background: rgba(217, 21, 21, 0.06);
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #d91515;
  font-size: 17px;
  color: #d91515;
  line-height: 28px;
  text-align: right;
  font-style: normal;
}

.pass {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 61px;
  height: 28px;
  background: rgba(34, 101, 238, 0.06);
  border-radius: 3px;
  font-size: 17px;
  color: #2265ee;
  line-height: 28px;
  text-align: right;
  font-style: normal;
  border: 1px solid #588fff;
}

::v-deep .el-icon-my-message {
  background: url("../../assets/myTrain/zhenshu.png") no-repeat;
  width: 20px;
  height: 20px;
  transform: translateY(4px) translateX(2px);
}

::v-deep .el-icon-my-message:before {
  content: "替";
  font-size: 20px;
  visibility: hidden;
}

::v-deep .el-icon-my-message {
  font-size: 18px;
}

::v-deep .el-icon-my-message:before {
  content: "\e611";
}

.cert-button.is-disabled {
  opacity: 0.6;
}
.cert-button.is-disabled i {
  filter: grayscale(100%);
}

.progress-success {
  padding: 3px 12px;
  color: #588fff;
  border: 1px solid #588fff;
  display: inline-block;
  border-radius: 5px;
}
.progress-error {
  padding: 3px 12px;
  color: #d91515;
  border: 1px solid #d91515;
  display: inline-block;
  border-radius: 5px;
}
</style>
